﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自定义指令</title>
    <meta charset="utf-8" />

    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp", [])
            //自定义服务
        .factory("hello", ["$window",  function (win) {
            return function (msg) {
                win.alert(["Hello,", msg,"!How are you?"].join(""));
            };
        }])
            .controller("myController", ["$scope", "hello", function ($scope, hello) {
                $scope.sayHello = function () {
                    hello($scope.person);
                };
                $scope.person = 'brother';
            }])
            //自定义指令
        .directive("helloWorld", function () {
            var dt = new Date().toLocaleDateString();
            return {
                template: ["Hello,world!It's ", dt, ",now!"].join("")
            };
        });

    </script>
</head>
<body ng-app="myApp" class="form ">
    <hello-world>{{template}}</hello-world>
    <div class="input-group" ng-controller="myController">
        <button class="input-group-addon" ng-click="sayHello()" type="button">Say hello to</button>
        <input class="form-control" type="text" ng-model="person" />
    </div>
    
</body>
</html>
